<template>
    <div>
         <div class="radd">
            <van-icon name="user-circle-o" size="80px" color="#ccc" />
        </div>
<div class="note">
        <span style="float:left;font-size:16px">短信登录</span><span style="float:right;" @click="pass()">密码登录</span>
</div>
<div>
<input type="text" placeholder="请输入验证码" id="yzm">
</div>
<div class="rlogin">登录</div>
<div class="rzc">
    <span style="float:left" @click="tap()">账号注册</span> <span style="float:right" >忘记密码?</span>
</div>
<div class="rspas">
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 15px' }">
        第三方登录
    </van-divider>
</div>
<div class="rtu">
     <i class="iconfont icon-QQ"></i><i class="iconfont icon-weixin"></i>
</div>
    </div>
</template>
<script>
export default {
    data(){
        return{
        }
    },
    methods:{
        tap(){     
            this.$router.push('/zcymfb')
        },
        pass(){
            this.$router.push('/zhmmdlfb')
        }
    }
}

</script>

<style>
.radd{
    width: 105px;
    height: 105px;
    margin:46px auto  0;
    }
.note{
    width: 200px;
    height: 16px;
    margin: 20px auto 10px;
    line-height: 16px
}
#yzm{
    width: 280px;
    height: 50px;
    margin:20px auto 0
}
.rlogin{
    width: 280px;
    height: 50px;
    margin: 30px auto 0;
    border: 1px solid #ccc;
    line-height: 50px;
   background:#26a2ff;
    color: #fff;
    font-size: 16px;
}
.rzc{
    width: 280px;
    margin: 5px auto 0
}
.rspas{
    margin: 200px auto 30px;
    width:330px;
}
.rtu{
    display: flex;
    justify-content: space-around
}
.iconfont{font-size:45px;}

</style>